フロントエンドのパフォーマンス改善のとっかかりとしてLighthouseとWebpack Bundle Analyzerで現状を調査してみた

おーしろ

2022.06.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、新規事業統括部 ProfllyチームでProfllyの開発を担当していますおーしろです。

プロダクトが成長していくにつれてコード量や利用するライブラリが増え動作がもっさりと遅くなってしまうことがあります。特にSPAは初回ページ読み込み時にコンテンツを一気にダウンロードするため時間がかかることがあります。 ProfllyのフロントエンドはNuxt.jsのSPAで開発されており、機能が増えていくにつれてそのような傾向が見られたためフロントエンドのパフォーマンスの調査を行いました。その中で利用したツールや調査方法などを記載しました。

調査に利用するツール

LighthouseはGoogleが提供しているWebアプリのパフォーマンスなどを計測するサービスです。またパフォーマンスだけでなくSEOが最適化されているかなどの計測も行うことができます。今回はChromeのDeveloper toolsから利用しました。

Webpack Bundle Analyzerはwebpackを可視化するツールでバンドルファイルのサイズや構成などをひと目で確認することができます。

Lighthouse

調査方法・パフォーマンス低下の原因

Google Chromeを利用していればDeveloper toolsから利用することができます。今回はパフォーマンスのみを計測したいのでPerformanceのみチェックし、DeviceはDesktopで計測しました。あとはGenerate reportをクリックすると計測を開始しレポートが生成されます。

計測が完了し下記のようなレポートが生成されます。

今回計測した環境のProllyの総合スコアは81でした。

※ちなみにここのも記載しているようにインターネットトラフィックやブラウザ拡張機能、ウイルス対策ソフトの影響でその都度スコアが変動することがあるとのことです。

特に「Speed Index」の項目が「▲」となり改善が必要なようです。

レポートを更に見ていくと「OPPORTUNITIES(改善できる項目)」というレポート項目があります。ここではLighthouseから改善方法が提案されています。強く改善が提案されている項目は 「▲ Serve images in next-gen formats(短縮できる時間)」 が1.28sとうまくいくと大幅に改善できそうです。詳細には下記のように記載されています。

「WebP や AVIF などの画像形式は、一般的に PNG や JPEG より圧縮率が高く、ダウンロード時間やデータ消費量が抑えられます。」

次の項目では上記についてどのような対策が必要なのか調べていきたいと思います。

対策

Profllyでは社員のプロフィール画像やアイコン画像にPNGの画像形式を利用しており、Lighthouseからの改善案は「PNGよりもWebPやAVIFの画像形式を利用したほうが1.28s改善されるよ」とのことでした。 WebPとはJPEGやPNGよりも圧縮率が優れており画像ファイルサイズが小さくなります。そのため初回ページ読み込み時のダウンロード速度が早くなります、AVIFはWebPよりも更に圧縮率が優れておりファイルサイズが小さくなるためAVIFの画像形式を利用することも提案されています。しかし、下記のように https://caniuse.com/ で対応ブラウザを調べるとWebPはIEに対応していないことや、AVIFはSafariに対応していないのが現状です。そのため「各プロダクトの推奨ブラウザに対応しているか？」「Google Analyticsなどからよく利用されているブラウザに対応しているか？」などを事前確認し場合によってはJPEGやPNGの画像も用意しておく必要があります。

その他の対策方法としてはvue-lazyloadなどを利用し画像の遅延読み込みをすることで初回表示速度の改善が期待できそうです。